<script setup lang="ts">
import { ref, defineEmits } from 'vue'
// 子调父
const emit = defineEmits<{
  (event: 'close'): void
}>()

const nation = ref('汉族')
const address = ref('110101')
const classValue = ref('1-2')
const classDataTree = ref([
  {
    text: '一年级',
    value: '1-0',
    children: [
      {
        text: '1.1班',
        value: '1-1',
      },
      {
        text: '1.2班',
        value: '1-2',
      },
    ],
  },
  {
    text: '二年级',
    value: '2-0',
    children: [
      {
        text: '2.1班',
        value: '2-1',
      },
      {
        text: '2.2班',
        value: '2-2',
      },
    ],
  },
  {
    text: '三年级',
    value: '3-0',
    disable: true,
  },
])

const onnodeclick = (e: any) => {
  console.log('nodeclick', e)
}
const onpopupopened = (e: any) => {
  console.log('onpopupopened')
}
const onpopupclosed = (e: any) => {
  console.log('onpopupclosed')
}
const onchange = (e: any) => {
  console.log('onchange', e.detail.value)
}
const inputclick = (e: any) => {
  console.log('inputclick')
}
</script>

<template>
  <view class="discount-panel">
    <view class="header"
      ><text class="title">使用优惠券</text>
      <text class="iconfont icon-close" @tap="emit('close')"></text
    ></view>
    <view class="coupon-list">
      <view class="container">
        <uni-card is-full :is-shadow="false"
          ><text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text></uni-card
        >

        <uni-section title="本地数据" type="line">
          <view class="uni-px-5 uni-pb-5">
            <uni-data-picker
              placeholder="请选择班级"
              popup-title="请选择"
              :localdata="classDataTree"
              v-model="classValue"
              @change="onchange"
              @nodeclick="onnodeclick"
              @popupopened="onpopupopened"
              @popupclosed="onpopupclosed"
              @inputclick="inputclick"
            ></uni-data-picker>
          </view>
        </uni-section>
        <uni-section title="自定义插槽" type="line">
          <view class="uni-px-5 uni-pb-5">
            <uni-data-picker
              v-slot:default="{ data, error, options }"
              title="请选择"
              :localdata="classDataTree"
              v-model="classValue"
            >
              <view class="input-border">
                <view v-if="error" class="error">
                  <text>{{ error }}</text>
                </view>
                <view v-else-if="data.length" class="input-selected">
                  <view v-for="(item, index) in data" :key="index" class="selected-item">
                    <text>{{ item.text }}</text>
                  </view>
                </view>
                <view v-else><text>请选择</text></view>
              </view>
            </uni-data-picker>
          </view>
        </uni-section>
        <!-- <view class="title">
      <text>Cloud 数据 (单例)</text>
    </view>
    <uni-data-picker v-model="nation" collection="opendb-nation-china" field="name as value, name as text"
      @nodeclick="onnodeclick" @change="onchange" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
    </uni-data-picker>

    <view class="title">
      <text>Cloud 数据 (树形)</text>
    </view>
    <uni-data-picker placeholder="请选择地址" popup-title="请选择所在地区" :preload="true" :step-searh="true" self-field="code"
      parent-field="parent_code" collection="opendb-city-china" orderby="value asc"
      field="code as value, name as text, eq(type, 2) as isleaf" v-model="address" @nodeclick="onnodeclick"
      @change="onchange" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
    </uni-data-picker>

    <view class="title">
      <text>uni-data-pickerview</text>
    </view>
    <uni-data-pickerview class="data-pickerview" :preload="true" :step-searh="true" self-field="code"
      parent-field="parent_code" collection="opendb-city-china" orderby="value asc" field="code as value, name as text">
    </uni-data-pickerview> -->
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import '@/styles/variables.scss';
.discount-panel {
  padding: 0 32rpx;
  border-radius: 24rpx 24rpx 0 0;
  position: relative;
  background-color: #fff;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 32rpx;
    margin-bottom: 32rpx;
    line-height: 60rpx;
    .title {
      font-size: $font-medium-size;
      color: $good-font-title-color;
      font-weight: $font-medium-weight;
    }
    .iconfont {
      color: $good-font-title-color;
      font-size: 50rpx;
    }
  }
  .coupon-list {
    .coupon-item {
      padding: $medium-padding;
      display: flex;
      flex-direction: row;
      margin-bottom: 20rpx;
      background-color: #fff;
      border-radius: $border-lager-radius;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

      .coupon-item-title {
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: center;
        border-right: 1px solid #f0f0f0;
        align-items: center;

        .price {
          font-size: 60rpx;
          color: #ff4444;
          font-weight: $font-bold-weight;
        }

        .desc {
          margin-top: 10rpx;
          font-size: 24rpx;
          color: #6b7280;
          font-weight: $font-regular-weight;
        }
      }

      .coupon-item-content {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-left: 30rpx;

        .title {
          font-size: $font-medium-size;
          font-weight: $font-medium-weight;
          color: #000;
        }

        .time {
          font-size: $font-small-size;
          color: #6b7280;
          font-weight: $font-medium-weight;
        }
      }

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont {
          color: $color;
          font-size: 50rpx;
          &.icon-gouxuan3 {
            color: #6b7280;
          }
        }
      }
    }
  }
}
</style>
